<template>
    <div>
        <div class="shopListInfo">
            <p class="title">———————— {{shopLists.title}} ————————</p>
            <div class="rowFirst">
                <dl v-for="(item,index) in shopLists.items" v-if="index<3" @click="goToCommit(item.gid)">
                    <dd>
                        <p>{{item.title}}</p>
                    </dd>
                    <dt>
                        <img :src="item.image" alt="">
                    </dt>

                </dl>
            </div>
            <div class="rowSec">
                <dl v-for="(item,index) in shopLists.items" v-if="index>=3" @click="goToCommit(item.gid)">
                    <dd>
                        <p>{{item.title}}</p>
                    </dd>
                    <dt>
                        <img :src="item.image" alt="">
                        <p class="price">¥{{item.price}}</p>
                        <p class="delPrice">¥{{item.cid}}.00</p>
                    </dt>
                </dl>

            </div>
        </div>
        <div class="shopListInfo">
            <p class="title">———————— {{shopListsec.title}} ————————</p>
            <div class="rowFirst">
                <dl v-for="(item,index) in shopListsec.items" v-if="index<2" @click="goToCommit(item.gid)">
                    <dd>
                        <p>{{item.title}}</p>
                        <p>火爆开售</p>
                    </dd>
                    <dt>
                        <img :src="item.image" alt="">
                    </dt>
                </dl>
            </div>
            <div class="rowSec">
                <dl v-for="(item,index) in shopListsec.items" v-if="index>=2" @click="goToCommit(item.gid)">
                    <dd>
                        <p>{{item.title}}</p>
                    </dd>
                    <dt>
                        <img v-lazy="item.image" alt="">
                        <p class="price">¥{{item.price}}</p>
                        <p class="delPrice">¥{{item.cid}}.00</p>
                    </dt>
                </dl>

            </div>
        </div>
        <div class="shopListInfo">
            <p class="title">———————— {{shopListThr.title}} ————————</p>
            <div class="rowFirst">
                <dl v-for="(item,index) in shopListThr.items" v-if="index<3" @click="goToCommit(item.gid)">
                    <dd>
                        <p>{{item.title}}</p>
                    </dd>
                    <dt>
                        <img v-lazy="item.image" alt="">
                    </dt>

                </dl>
            </div>
            <div class="rowSec">
                <dl v-for="(item,index) in shopListThr.items" v-if="index>=3" @click="goToCommit(item.gid)">
                    <dd>
                        <p>{{item.title}}</p>
                    </dd>
                    <dt>
                        <img v-lazy="item.image" alt="">
                        <p class="price">¥{{item.price}}</p>
                        <p class="delPrice">¥{{item.cid}}.00</p>
                    </dt>
                </dl>
            </div>
        </div>
    </div>

</template>
<script>
    import {getShop} from "../../api/list/list";

    export default {
        name:'shopListInfo',
        data(){
            return{
                shopLists:[],
                shopListsec:[],
                shopListThr:[]
            }
        },
        created() {
            getShop().then((res)=>{
                let data = res.data.data
                this.shopLists = data[0]
                this.shopListsec = data[1]
                this.shopListThr = data[2]
            })
        },
        methods:{
            goToCommit(id){
                this.$router.push({path:'/commodity/index',query:{gid:id}})
            }
        }
    }
</script>
<style lang="less" scoped>
    .shopListInfo{
        width: 100%;
        background: white;
        margin-top: 0.1rem;
        .title{
            text-align: center;
            color: #f43e63;
        }
        dl{
            width: 100%;
            dt{
                width: 100%;
                img{
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }
        }
        .rowSec{
            width: 100%;
            display: flex;
            border-bottom: 1px solid #efefef;
            dl{
                flex: 1;
                dd{
                    p{
                        width: 1.5rem;
                        white-space: nowrap;
                        overflow: hidden;
                        font-weight: 700;
                    }
                }
                dt{
                    text-align: center;
                    .price{
                        color: #d32a4e;
                        font-size: 0.28rem;
                    }
                    .delPrice{
                        color: #7b7f82;
                        text-decoration: line-through;
                        font-size: 0.2rem;
                    }
                    img{
                        width: 100%;
                        height: 1.5rem;
                        display: block;
                    }
                }
            }
            dl:nth-child(2){
                border-right:1px solid #efefef;
                border-left:1px solid #efefef;
            }
            dl:nth-child(3){
                border-right:1px solid #efefef;
            }
        }
    }
    .shopListInfo:first-child{
        .rowFirst{
            width: 100%;
            border-top: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            dl:first-child{
                width: 50%;
                height: 2.4rem;
                float: left;
                padding-top: 0.3rem;
                box-sizing: border-box;
                border-right: 1px solid #efefef;
                dt{
                    width: 100%;
                    height: 1rem;
                    margin-top: 0.1rem;
                    img{
                        width: 100%;
                        height: 1.5rem;
                        display: block;
                    }
                }
                dd{
                    p{
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
            }
            dl:nth-child(2){
                width: 50%;
                float: left;
                height: 1.2rem;
                display: flex;
                border-bottom:1px solid #efefef ;
                dt{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 1.2rem;
                        height: auto;
                        display: block;
                    }
                }
                dd{
                    p{
                        width: 1.4rem;
                        white-space: nowrap;
                        overflow: hidden;
                        font-weight: 700;
                        margin-left: 0.1rem;
                        line-height: 0.6rem;
                    }
                }
            }
            dl:nth-child(3){
                width: 50%;
                float: left;
                display: flex;
                height: 1.2rem;
                dt{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 1.2rem;
                        height: auto;
                        display: block;
                    }
                }
                dd{
                    p{
                        width: 1.4rem;
                        white-space: nowrap;
                        overflow: hidden;
                        font-weight: 700;
                        margin-left: 0.1rem;
                        line-height: 0.6rem;
                    }
                }
            }
        }
    }

    .shopListInfo:nth-child(2){
        .title{
            color: #fc672b;
        }
        .rowFirst{
            width: 100%;
            display: flex;
            border-top: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            dl{
                flex: 1;
                dt{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 1rem;
                        height: auto;
                        display: block;
                    }
                }
                dd{
                    width: 100%;
                    text-align: center;
                    p:first-child{
                        width: 3.1rem;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    p:last-child{
                        color: #7b7f82;
                    }
                }

            }
            dl:first-child{
                 border-right: 1px solid #efefef;
             }
        }
    }
    .shopListInfo:nth-child(3){
        .title{
            color: #5fc600;
        }
        .rowFirst{
            width: 100%;
            border-top: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            dl:first-child{
                width: 50%;
                height: 2.4rem;
                float: left;
                padding-top: 0.3rem;
                box-sizing: border-box;
                border-right: 1px solid #efefef;
                dt{
                    width: 100%;
                    height: 1rem;
                    margin-top: 0.1rem;
                    img{
                        width: 100%;
                        height: 1.5rem;
                        display: block;
                    }
                }
                dd{
                    p{
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
            }
            dl:nth-child(2){
                width: 50%;
                float: left;
                height: 1.2rem;
                display: flex;
                border-bottom:1px solid #efefef ;
                dt{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 1.2rem;
                        height: auto;
                        display: block;
                    }
                }
                dd{
                    p{
                        width: 1.4rem;
                        white-space: nowrap;
                        overflow: hidden;
                        font-weight: 700;
                        margin-left: 0.1rem;
                        line-height: 0.6rem;
                    }
                }
            }
            dl:nth-child(3){
                width: 50%;
                float: left;
                display: flex;
                height: 1.2rem;
                dt{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                        width: 1.2rem;
                        height: auto;
                        display: block;
                    }
                }
                dd{
                    p{
                        width: 1.4rem;
                        white-space: nowrap;
                        overflow: hidden;
                        font-weight: 700;
                        margin-left: 0.1rem;
                        line-height: 0.6rem;
                    }
                }
            }
        }

    }
</style>